<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 首页设置 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-card class="box-card" v-loading="bannerListLoad">
        <div slot="header" class="clearfix">
          <span>轮播图设置</span>
        </div>
        <el-row>
          <el-col :span="8" v-for="item in bannerList" :key="item.id">
            <el-image style="width: 375px; height: 200px" :src="item.value" fit="fill" :preview-src-list="bannerimgList"></el-image>
            <div style="text-align: center;">
              <el-upload class="upload-demo" action="" :before-upload="(file)=>{editBanner(file,item.id)}" accept=".png,.jpg" :show-file-list="false">
                <el-button size="small" type="text" icon="el-icon-edit">重新上传</el-button>
              </el-upload>
              <el-button type="text" icon="el-icon-delete" @click="delBanner(item.id)">删除</el-button>
              <!-- <el-button type="text" icon="el-icon-link" @click="linkClick(item.mhpId)">选择链接</el-button>
              <el-popover v-if="item.mhpOutLink || item.mhpProductId" placement="bottom" title="" width="200" trigger="hover"
                          style="margin-left:10px;">
                <p>{{item.mhpType == 0 ? item.mhpName : item.mhpOutLink}}</p>
                <el-button slot="reference" type="text" icon="el-icon-link" @click="linkClick(item.mhpId)">已有链接</el-button>
              </el-popover> -->
            </div>
          </el-col>
          <el-col :span="8">
            <el-upload class="upload-demo" drag action="" :before-upload="addBanner" accept=".png,.jpg" :show-file-list="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb，推荐上传 375*200</div>
            </el-upload>
          </el-col>
        </el-row>
      </el-card>
      <!-- 选择热门搜索 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>选择热门搜索</span>
        </div>
        <div>
          <el-button type="primary" @click="souclick">选择热门类别</el-button>
          <div style="margin-top:10px;">
            <el-tag closable v-for="item in hot.checklist" @close="souDel(item.ptId)" style="margin:0 10px 10px 0;">
              {{item.ptName}}
            </el-tag>
          </div>
        </div>
      </el-card>
      <!-- 公告 -->
      <notice></notice>
      <!-- 选择合作银行 -->
      <el-card class="box-card" v-loading="bankload">
        <div slot="header" class="clearfix">
          <span>选择合作银行</span>
        </div>
        <div>
          <el-button type="primary" @click="bankclick">选择银行</el-button>
          <div style="margin-top:10px;">
            <el-tag closable v-for="(item,index) in bank.checkbank" style="margin:0 10px 10px 0;" @close="bankDel(item,index)">
              {{item.bName}}
            </el-tag>
          </div>
        </div>
      </el-card>
      <!-- 选择银行 -->
      <el-dialog title="选择银行" :visible.sync="bank.flg" width="40%" @close="bankclose">
        <div class="handle-box">
          <el-input v-model="bank.kw" placeholder="请输入名称查询" class="mr10" style="width:80%;"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="bankSearch">搜索</el-button>
        </div>
        <el-col :span="24" style="margin-bottom:20px;" v-if="bank.checkbank.length > 0">
          <p style="margin-bottom:10px;">选中银行：</p>
          <el-tag closable v-for="(item,index) in bank.checkbank" style="margin:0 10px 10px 0;" @close="bankDel(item,index)">{{item.bName}}
          </el-tag>
        </el-col>
        <el-table v-loading="bank.loading" :data="bankTableData" border class="table" style="width: 100%" ref="bankListTable"
                  header-cell-class-name="table-header" @selection-change="bankSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="bName" label="银行名称"></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-popover placement="right" width="200" trigger="click">
                <el-image style="width: 200px;" :src="scope.row.bLogo" :preview-src-list="[scope.row.bLogo]">
                </el-image>
                <el-button slot="reference" type="text">查看LOGO</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="bank.page" :page-size="bank.limit" :total="bank.totalCount"
                         @current-change="bankPageChange" @prev-click="bankPageChange" @next-click="bankPageChange"></el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="bank.flg = false">取 消</el-button>
          <el-button type="primary" @click="bankSub" :loading="bank.loading">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 选择热门分类 -->
      <el-dialog title="选择热门分类" :visible.sync="hot.flg" width="40%" @close="classClose">
        <el-col :span="24" style="margin-bottom:20px;" v-if="hot.checklist.length > 0">
          <p style="margin-bottom:10px;">选中热门分类：</p>
          <el-tag closable v-for="(item,index) in hot.checklist" style="margin:0 10px 10px 0;" @close="souDel(item.ptId)">{{item.ptName}}
          </el-tag>
        </el-col>
        <el-table :data="hot.list" border class="table" style="width: 100%" ref="souTable" header-cell-class-name="table-header"
                  @selection-change="listchange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" :index="souIndex" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="ptName" label="分类名称"></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="hot.page" :page-size="hot.limit" :total="hot.totalCount"
                         @current-change="souPage" @prev-click="souPage" @next-click="souPage"></el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="hot.flg = false">取 消</el-button>
          <el-button type="primary" @click="souSub" :loading="hot.loading">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  webDindexBannerInit, webDindexBannerAddEdit, webDindexBannerDel, webDclassInit, webDindexSouInit, webDindexSouAdd, webDindexSouDel, webDindexBankInit, webDindexBankSub, webDindexBankDel, CustomerHomeGetBanklogo
} from '../../../api/index';
import cosUpFile from '../../../utils/cos'
import notice from './dindexTemplate/notice.vue'
export default {
  data() {
    return {
      bannerListLoad: false,
      bannerList: [],
      //热门分类
      hot: {
        flg: false,
        loading: false,
        list: [],
        checklist: [],
        page: 1,
        limit: 10,
        totalCount: 0,
      },
      //银行
      bankload: false,
      //选择银行
      bank: {
        flg: false,
        loading: false,
        kw: '',
        page: 1,
        limit: 10,
        totalCount: 0,
        checkbank: [],
      },
      bankTableData: []

    }
  },
  components: {
    notice
  },
  created() {
    this.getBanner();
    this.souInit();
    this.souListInit();
    this.bankInit();
  },
  methods: {
    //获取轮播图
    getBanner() {
      this.bannerListLoad = true;
      webDindexBannerInit().then((res) => {
        this.bannerListLoad = false;
        if (res.code == 0) {
          this.bannerList = res.list;
          this.bannerimgList = [];
          res.list.forEach((item, i) => {
            this.bannerimgList.push(item.mhpPhotoUrl);
          })
        } else {
          this.$message(res.msg);
        }
      })
    },
    //上传图片
    addBanner(file) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          webDindexBannerAddEdit({ value: 'https://' + data.Location }).then(res => {
            if (res.code == 0) {
              this.$message.success("上传成功");
              this.getBanner();
            } else {
              this.$message(res.msg);
            }
          })
        }
      })
      return false;
    },
    //修改banner
    editBanner(file, id) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          webDindexBannerAddEdit({ value: 'https://' + data.Location, id: id }).then(res => {
            if (res.code == 0) {
              this.$message.success("编辑成功");
              this.getBanner();
            } else {
              this.$message(res.msg);
            }
          })
        }
      })
      return false;
    },
    //删除banner
    delBanner(id) {
      webDindexBannerDel({ id: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getBanner();
        } else {
          this.$message(res.msg);
        }
      })
    },

    //热门搜索选中初始化
    souInit() {
      webDindexSouInit().then(res => {
        if (res.code == 0) {
          this.hot.checklist = res.list;
          if (this.hot.flg) {
            this.souCheck();
          }
        } else {
          this.$message(res.msg);
        }
      })
    },
    //热门搜索弹窗关闭
    classClose() {
      this.souInit();
    },
    //热门搜索删除
    souDel(id) {
      webDindexSouDel({
        id: id
      }).then(res => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          if (this.hot.flg) {
            this.$refs.souTable.clearSelection();
          }
          this.souInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //热门搜索点击选择
    souclick() {
      this.hot.page = 1;
      this.hot.flg = true;
      this.souListInit();
    },
    //热门展示已经选中
    souCheck() {
      if (this.hot.checklist.length > 0) {
        this.hot.checklist.forEach(item => {
          this.hot.list.forEach(e => {
            if (item.ptId == e.ptId) {
              setTimeout(() => {
                this.$refs.souTable.toggleRowSelection(e, true);
              }, 0)
            }
          })
        })
      }
    },
    //热门搜索列表获取
    souListInit() {
      webDclassInit({
        page: this.hot.page,
        limit: this.hot.limit,
        type: '1',
        kw: '',
      }).then(res => {
        if (res.code == 0) {
          this.hot.list = res.recordList;
          this.hot.totalCount = res.totalCount;
          if (this.hot.flg) {
            this.souCheck();
          }
        } else {
          this.$message(res.msg);
        }
      })
    },
    //热门搜索选择
    listchange(item) {
      let arr = this.hot.checklist.map(e => {
        return e.ptId;
      })
      item.forEach(ev => {
        if (arr.indexOf(ev.ptId) == -1) {
          this.hot.checklist.push(ev);
        }
      })
    },
    //热门搜索列表翻页
    souPage(page) {
      this.hot.page = page;
      this.souListInit();
    },
    //热门搜索列表序号
    souIndex(index) {
      return (this.hot.page - 1) * this.hot.limit + index + 1;
    },
    //热门搜索选中提交
    souSub() {
      this.hot.loading = true;
      let arr = this.hot.checklist.map(item => {
        return item.ptId;
      });
      webDindexSouAdd({
        ids: arr
      }).then(res => {
        this.hot.loading = false;
        if (res.code == 0) {
          this.$message.success('提交成功');
          this.souInit();
          this.hot.flg = false;
        } else {
          this.$message(res.msg);
        }
      })
    },

    //银行初始化
    bankInit() {
      this.bankload = true;
      webDindexBankInit().then(res => {
        this.bankload = false;
        if (res.code == 0) {
          this.bank.checkbank = res.list;
          if (this.bank.flg) {
            this.checkBank();
          }
        } else {
          this.$message(res.msg);
        }
      })
    },
    //关闭银行弹出
    bankclose() {
      this.bankInit();
    },
    //点击选择银行
    bankclick() {
      this.bank.page = 1;
      this.bank.flg = true;
      this.bankGetList();
    },
    //选中已选中银行
    checkBank() {
      this.bankTableData.forEach(item => {
        this.bank.checkbank.forEach(e => {
          if (item.id == e.id) {
            setTimeout(() => {
              this.$refs.bankListTable.toggleRowSelection(item, true);
            }, 0)
          }
        })
      })
    },
    //银行获取列表初始化
    bankGetList() {
      this.bank.loading = true;
      CustomerHomeGetBanklogo({
        page: this.bank.page,
        limit: this.bank.limit,
        name: this.bank.kw
      }).then(res => {
        this.bank.loading = false;
        if (res.code == 0) {
          this.bankTableData = res.recordList;
          this.bank.totalCount = res.totalCount;
          this.checkBank();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //银行列表翻页
    bankPageChange(page) {
      this.bank.page = page;
      this.bankGetList();
    },
    //选中银行获取列表序号
    tableIndex(index) {
      return (this.bank.page - 1) * this.bank.limit + index + 1;
    },
    //银行列表点击搜素
    bankSearch() {
      this.bank.page = 1;
      this.bankGetList();
    },
    //银行列表多选
    bankSelectionChange(item) {
      let arr = this.bank.checkbank.map(item => {
        return item.id;
      })
      item.forEach(ev => {
        if (arr.indexOf(ev.id) == -1) {
          this.bank.checkbank.push(ev);
        }
      })
    },
    //删除选中的银行
    bankDel(item, i) {
      webDindexBankDel({
        id: item.id
      }).then(res => {
        if (res.code == 0) {
          this.$message.success('删除成功');
          if (this.bank.flg) {
            this.$refs.bankListTable.clearSelection();
          }
          this.bankInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //确定选中银行
    bankSub() {
      let bankIdList = this.bank.checkbank.map(item => {
        return item.id
      })
      webDindexBankSub({
        ids: bankIdList
      }).then(res => {
        this.bank.flg = false;
        if (res.code == 0) {
          this.$message.success('提交成功');
          this.bankInit();
        } else {
          this.$message(res.msg);
        }
      })
    },

  }
}
</script>
<style scoped>
.box-card {
    margin-bottom: 20px;
}
</style>